<template>
    <div class="edtiArticle">
        <div class="drawerTop">
            <div class="title">编辑Banner图</div>
            <div class=seetingBox>
                <el-form label-width="82px" size="default">
                    <el-form-item label="上传图片" required style="margin-bottom:5px;"></el-form-item>
                    <div class="tips">
                        <el-image :src="icon_tishi" width="20"></el-image>
                        建议上传大小为1200 * 340 像素, 上传png/jpeg/jpg等格式
                    </div>
                    <div class="uploadList">
                        <div style="display: inline-block;margin-right:20px;margin-top:20px;">
                            <CropperImage :avatar="ImageUrl" :cropperImageDialog="cropperImageDialog" :fixedRate="[60,17]"
                                :showCloceIcon="false" tips="点击上传轮播图" @changeImage="changeImage" :width="200"
                                :height="100" :autoCropWidth="1200" :autoCropHeight="340" dir="school_logo">
                            </CropperImage>
                        </div>
                        <div class="items" v-for="(item, index) in bannerList" :key="index"
                            @mouseenter="mouserIndex = index" @mouseleave="mouserIndex = -1">
                            <el-image :src="item" fit="cover" style="width: 100%;height: 100%;"></el-image>
                            <transition name="fade" mode="out-in">
                                <div class="model-img-box" v-if="mouserIndex == index">
                                    <div class="mine-flex-box">
                                        <el-icon @click="showImage(index)">
                                            <View />
                                        </el-icon>
                                        <span></span>
                                        <el-icon @click="handleRemove(index)">
                                            <Delete />
                                        </el-icon>
                                    </div>
                                </div>
                            </transition>
                        </div>
                    </div>
                </el-form>
            </div>
            <div class="fixed-btn-box2">
                <el-button type="primary" @click="submitForm">保存更改</el-button>
                <el-button type="primary" class="white-bg-btn" plain @click="resetForm">取消</el-button>
            </div>
        </div>
        <!-- 查看图片 -->
        <el-image-viewer v-if="showViewer" @close="closeViewer" :url-list="srcList"></el-image-viewer>
    </div>
</template>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, h, onMounted, reactive, watch, toRaw } from 'vue'
import icon_tishi from '../../../assets/images/icon_tishi.png'
import { editSitecfgCfg } from '../../Api/Setting'
interface PropsType {
    infoData?: any
    id?: string
}
const props = withDefaults(defineProps<PropsType>(), {
    infoData: [],
    id: ''
})
interface EmitType {
    (e: 'getConfig'): void
    (e: 'getConfigInfo', data: any): void

}
const emit = defineEmits<EmitType>()
const cropperImageDialog = ref<boolean>(false)
const bannerList = ref<any>([])
// 查看图片
const srcList = ref<any>([])
const showViewer = ref(false)// 显示查看器
const showImage = (index: number) => {
    srcList.value = []
    srcList.value.push(bannerList.value[index])
    showViewer.value = true
}
const closeViewer = () => {
    showViewer.value = false
}
const handleRemove = (index: number) => {
    bannerList.value.splice(index, 1)
}
// 用于裁剪与看的图片
const mouserIndex = ref<number>(-1)
const ImageUrl = ref<string>('')
const changeImage = (res: any) => {
    console.log(res.inch, 'res')
    bannerList.value.push(res.inch)
}
const submitForm = async () => {
    const res: any = await editSitecfgCfg({ id: props.id, cfg_val: JSON.stringify(bannerList.value) })
    if (res.code !== 1) return ElMessage.error(res.msg)
    ElMessage.success(res.msg)
    emit('getConfig')
    setTimeout(() => {
        if (props.infoData && props.infoData.length > 0) {
            bannerList.value = JSON.parse(JSON.stringify(props.infoData))
        }
    }, 500)
}
const resetForm = () => {
    emit('getConfig')
    if (props.infoData && props.infoData.length > 0) {
        bannerList.value = JSON.parse(JSON.stringify(props.infoData))
    }
}
watch(
    () => bannerList.value,
    (newVal: any, oldVal: any) => {
        emit('getConfigInfo', JSON.stringify(bannerList.value))
    },
    { deep: true, immediate: true }
)
onMounted(() => {
    if (props.infoData && props.infoData.length > 0) {
        bannerList.value = JSON.parse(JSON.stringify(props.infoData))
    }
})
defineExpose({ bannerList, submitForm })
</script>
<style lang="scss" scoped>
.edtiArticle {
    height: 100%;

    .drawerTop {
        height: 100%;
        position: relative;

        .title {
            height: 48px;
            line-height: 48px;
            border-bottom: 1px solid #E4E4E4;
            font-weight: bold;
            font-size: 14px;
            color: #333333;
            padding: 0 20px;
        }
        .seetingBox {
            padding: 20px;
            height: calc(100% - 130px);
            overflow-y: scroll;
            box-sizing: border-box;

            .tips {
                display: flex;
                align-items: flex-start;
                font-size: 12px;

                .el-image {
                    display: flex;
                    align-items: flex-start;
                    margin-right: 5px;
                }
            }
            .uploadList {
                    display: flex;
                    flex-flow: wrap;
                    width: 100%;

                    .items {
                        width: 200px;
                        height: 100px;
                        background: #EEEEEE;
                        display: inline-block;
                        margin: 0 20px 0 0;
                        border-radius: 4px;
                        border: 1px dashed #DCDCDC;
                        position: relative;
                        padding: 6px;
                        box-sizing: border-box;
                        margin-top:20px;

                        .el-image {
                            border-radius: 4px;
                            background: #ffffff
                        }

                        .model-img-box {
                            background: rgba(0, 0, 0, 0.5);
                            width: 100%;
                            height: 100px;
                            position: absolute;
                            cursor: pointer;
                            top: 0;
                            left: 0;
                            border-radius: 4px;
                            z-index: 9;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: #fff;

                            i {
                                color: #fff;
                                font-size: 16px;
                            }

                            .mine-flex-box {
                                display: flex;
                                width: 32%;
                                justify-content: space-between;
                                align-items: center;

                                .el-icon {
                                    transition: all 1s;
                                    font-weight: bold;
                                }

                                span {
                                    width: 1px;
                                    margin: 0 7px;
                                    height: 12px;
                                    background: rgba(255, 255, 255, 0.9);
                                    display: inline-block;
                                }

                                .el-icon:first-of-type:hover {
                                    transform: scale(1.2);
                                }

                                .el-icon:last-of-type:hover {
                                    transform: scale(1.2);
                                }
                            }
                        }
                    }
                    .items:nth-of-type(2n){
                        margin-right:0px;
                    }
                }
        }
    }

    .fixed-btn-box2 {
        left: 0px;
        right: 0px;
        position: absolute;
        bottom: 0px;
        box-shadow: 0px -3px 4px 1px rgba(0, 0, 0, 0.06);

        .el-button {
            margin: 15px;
            margin-right: 15px;
            margin-left: 0px;
            float: right;
        }
    }
}
</style>